<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" >
        <div class="todslist" style="max-width: 800px;margin: 20px auto; border: 1px solid #333; padding: 10px;">
            <div class="row">
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model.trim='todo'>
                </div>
                <div class="col-sm-2">
                    <button class="btn btn-success" @click='add'>增加待办事项</button>
                </div>
            </div>
            <!-- 待办事项 -->
            <div style="margin-top: 20px;" v-cloak>
                <ul class="list-group">
                    <li  class="list-group-item clearfix" v-if='list.length==0'>
                        <span>暂无待办事项</span>
                    </li>

                    <li v-for='(item,index) in list'
                        class="list-group-item clearfix"
                    >
                        <span>{{item.content}}</span>
                        <div class="pull-right">
                            <button 
                                @click='finish(index)'
                                class="btn btn-primary btn-sm" 
                                :disabled='item.status'
                            >{{item.status?'已完成':'点击完成'}}</button>
                            <button class="btn btn-danger btn-sm" @click='del(index)'>删除</button>
                        </div>
                    </li>
                    
                   
                  </ul>
            </div>
        
        </div>
        {{todo}}
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const vm =new Vue({
        el:'#app',
        data:{
            todo:'',
            list:[
            {
                    content:'惊天',
                    status:false
                },
                {
                    content:'明天',
                    status:true
                },
                {
                    content:'后天',
                    status:false
                },{
                    content:'前天',
                    status:false
                }
            ]
        },
        methods:{
            add(){
                this.list.push({
                    content:this.todo,
                    status:false
                })
                this.todo=''
            },
            finish(index){
                this.list[index].status=true
            },
            del(index){
            this.list.splice(index,1)
        }
        }
        
    })
</script>
</html>